<template>
     <div>
    <dialog-component v-if="Visiable" ref="dialog"></dialog-component>
    <H1>商品销售管理</H1>
    <el-input class="button" v-model="input"  placeholder="请输入商品编号" ref="search"> </el-input>
        <el-button type="primary"  @click="handleSearch" round>查询</el-button>
        <el-drawer title="查询结果" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
          <span :data="test">
            <el-table :data="selectedArray" style="width: 100%">
              <el-table-column prop="goodsId" label="销售订单" width="300"></el-table-column>
              <el-table-column prop="createTime" label="购买时间" width="200"></el-table-column>
              <el-table-column prop="saleNum" label="销售数量" width="200"></el-table-column>
              <el-table-column prop="originPrice" label="单价" width="250"></el-table-column>
              <el-table-column prop="discountPrice" label="总价" width="200"></el-table-column>
            </el-table>
          </span>
        </el-drawer>
        <h1>销售记录</h1>
        <el-table :data="dataList"    style="width: 100%">
          
    <el-table-column prop="goodsId" label="销售订单"  width="300"></el-table-column>
    <el-table-column prop="createTime"  label="购买时间"  width="150">
    </el-table-column>
    <el-table-column  prop="saleNum"  label="销售数量"  width="200">
    </el-table-column>
    <el-table-column  prop="originPrice" label="单价" width="200">
    </el-table-column>
    <el-table-column  prop="discountPrice" label="总价" width="200">
    </el-table-column>
    <el-table-column  fixed="right" label="操作" width="150">
      <template slot-scope="scope">
        
        <el-button @click="handleClick(scope.row.id)" type="text" size="small">编辑</el-button>
  
        <el-button type="text" size="small"  @click="del(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
        
        <el-pagination
        :current-page="currentPage"
        :page-size="5"
        :total="dataList.length"
        @current-change="handlePageChange"
      ></el-pagination>


      
    </div>
</template>
<script>
    import dialogComponent from "./dialogGood";
    import axios from 'axios';
    export default {
        mounted() {
           // 组件加载完成后立即调用fetchData方法
            this.fetchData();
            this.selectedArray=this.dataList;
        },
        components:{
            dialogComponent
        },
        name:'User',
      methods: {
          fetchData() {
            axios.get('api/sales/page',{
        }).then(response => {
           // 这里的response.data就是从接口中返回的数据
            this.dataList=response.data.result.records
            console.log(dataList)
            // 将数据存储到Vue组件的数据中
            this.data = response.data;
      }).catch(error => {
              console.error(error);
      });
  },
  handleSearch() {
      // 根据输入框的值筛选出符合条件的数组
      if (this.input) {
        this.selectedArray[0] = this.dataList[this.input-1];

      } else {
        
        console.log(error)
      }
      
      this.drawer = true; // 打开抽屉，展示查询结果
      
    },
        handleClose(done) {
           
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
            this.$router.go(0)
          })
          .catch(_ => {


          });
        },
          handleClick(data){
            this.Visiable=true;
            this.$nextTick(()=>{
            //这里的dialog与上面dialog-component组件里面的ref属性值是一致的
            //init调用的是dialog-component组件里面的init方法
            //data是传递给弹窗页面的值
                this.$refs.dialog.init(data);
            })
         },
         handlePageChange(page) {
            this.currentPage = page;
    },
         del(id) {
            this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
              axios.delete(`api/sales/${id}`,{
            }).then(response => {
           // 这里的response.data就是从接口中返回的数据
           this.fetchData();
           console.log(response)
            }).catch(error => {
              console.error(error);
             });this.$message({
                //删除记录功能
                type: 'success',
                message: '删除成功!'
            });
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
            });
      }
    },
    computed: {
      paginatedData() {
        const startIndex = (this.currentPage - 1) * 5;
        const endIndex = startIndex + 5;
        return this.data.slice(startIndex, endIndex);
      },
  },
    data() {
      return {
        drawer: false,
        select:0,
        direction: 'ttb',
        input:'',
        price:'',
        test:'ssss',
        Visiable:false,
        price:1,
        selectedArray: [],
        dataList:[],
        currentPage: 1, // 当前页码
      }
    }
}

</script>
<!--     引入样式 -->
<style scoped>



    .button{
        width: 400px;
    }

</style>